<script setup>
import { ref,reactive, onMounted } from 'vue'
import {useRouter} from 'vue-router';
import {index}  from '../../api/news.js'
import ImageUpload from '../../components/ImageUpload.vue'

const state = reactive({
  news:[],
  form:{}
});
const router = useRouter();
const handleDel = ()=>{

}
const visible = ref(false);
const handelAdd = ()=>{
  router.push('/category/add');
}
onMounted(()=>{
    index().then(res=>{
    state.news = res.data.data;
  })

});
const updateImageUrl = (imageUrl) => {
  console.log('imageUrl:',imageUrl);
  state.form.image = imageUrl;
}
const onSubmit=()=>{
  update(state.form).then(res=>{

  })
}
const handleEdit=(index,row)=>{
    router.push('/news/edit?id='+row.id);
}
</script>

<template>
    <el-row class="mb-4">
    <el-button type="success" @click="handelAdd">添加</el-button>
  </el-row>
     <el-col :span="18"><div class="grid-content ep-bg-purple-dark" />
       <el-table 
        :data="state.news" stripe style="width: 100%"
           row-key="id"
            border
           default-expand-all
        >
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="标题"  width="180" />
        <el-table-column prop="image" label="图片"  width="180" >
        <template #default="scope">
          <el-image :src="scope.row.image"></el-image>
        </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
        <el-button link type="danger" size="small"  @click="handleDel(scope.$index,scope.row)">删除</el-button>
      
      </template>
    </el-table-column>
      </el-table>
</el-col>
<!-- <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改分类!</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="分类名">
              <el-input v-model="state.form.name" />
            </el-form-item>
            <el-form-item label="a">
              <ImageUpload  :imageUrl="state.form.image" @update:imageUrl="updateImageUrl"/>
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog> -->
  
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
